import React from 'react';
import { Link, useLocation } from 'react-router-dom';
import styles from './Sidebar.module.css';

const Sidebar = () => {
  const location = useLocation();

  const menuItems = [
    { path: '/home', icon: '📊', label: '仪表盘' },
    { path: '/users', icon: '👥', label: '用户管理' },
    { path: '/articles', icon: '📝', label: '文章管理' },
    { path: '/activities', icon: '🎉', label: '活动管理' },
    { path: '/settings', icon: '⚙️', label: '系统设置' },
  ];

  return (
    <div className={styles.sidebar}>
      <nav className={styles.navMenu}>
        {menuItems.map((item) => (
          <Link
            key={item.path}
            to={item.path}
            className={`${styles.navItem} ${
              location.pathname === item.path ? styles.active : ''
            }`}
          >
            <i>{item.icon}</i>
            <span>{item.label}</span>
          </Link>
        ))}
      </nav>
    </div>
  );
};

export default Sidebar;